<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 只有一个插槽 -->
        <!-- 如果没给插槽赋值，会使用插槽默认值 -->
        <cpn></cpn>

        <cpn>
            <button>插槽按钮</button>
        </cpn>

        <cpn>
            <input type="text" placeholder="插槽输入框">
        </cpn>

        <cpn>
            <i>插槽斜体字</i>
        </cpn>


        <cpn>
            <!-- 如果有多个元素放进一个插槽中，会全部显示 -->
            <input type="text" placeholder="插槽输入框">
            <button>插槽按钮</button>
            <i>插槽斜体字</i>
        </cpn>

        <hr>

        <!-- 多个插槽 -->
        <cpn2>
            <!-- slot属性替换有具体名字的插槽 -->
            <span slot="center">中间标题</span>
            <!-- 如果没有slot属性，替换没有名字的插槽 -->
            <span>呵呵呵</span>
        </cpn2>

        <cpn2>
            <!-- slot属性替换有具体名字的插槽 -->
            <button slot="left">左边返回</button>
            <!-- 如果没有slot属性，替换没有名字的插槽 -->
            <span>呵呵呵</span>
        </cpn2>



        <!-- 父组件使用子组件的数据，并占位插槽 -->
        <cpn3>
            <!-- 插槽占位用template包裹，slot-scope属性指定一个变量slot，slot.data就是子组件的mes -->
            <template slot-scope="slot">
                <p>{{slot.data}}</p>
            </template>
        </cpn3>


        
    </div>

    <template id="cpn">
        <div>
            <h1>我是子组件</h1>
            <!-- slot插槽 -->
            <slot>
                <!-- slot插槽默认值 -->
                <p>默认插槽</p>
            </slot>
        </div>
    </template>

    <template id="cpn2">
        <div>

            <!-- slot插槽有name属性 -->
            <slot name="left">
                <!-- slot插槽默认值 -->
                <span>左边插槽</span>
            </slot>
            <slot name="center">
                <!-- slot插槽默认值 -->
                <span>中间插槽</span>
            </slot>
            <slot name="right">
                <!-- slot插槽默认值 -->
                <span>右边插槽</span>
            </slot>
            <slot>
                <span>哈哈哈哈</span>
            </slot>
        </div>
    </template>


    <!-- slot插槽增加自定义属性 -->
    <template id="cpn3">
        <div>
            <h1>我是子组件</h1>
            <!-- slot插槽 -->
            <!-- 把子组件的mes绑定到自定义data属性上，方便在父组件slot.data获取，即slot.data=mes -->
            <slot :data="mes">
                <!-- slot插槽默认值 -->
                <ul>
                    <li v-for="item in mes">{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>

    <script src="../vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{

            },
            methods: {
                
            },
            components:{
                cpn:{
                    template:'#cpn'
                },
                cpn2:{
                    template:'#cpn2'
                },
                cpn3:{
                    template:'#cpn3',
                    data(){
                        return{
                            mes:['aaa','bbb','cccc']
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>